{% extends 'index.html' %}
{% load custom_tag %}
{% block page-title %}

{% endblock %}

{% block page-content %}
<style>
.sea {
    z-index: 3;
}
</style>
<div class="row">

    <div class="col-lg-12">
        <div class="input-group col-lg-2 pull sea">
            <select id="account" class="selectpicker form-control"  data-live-search="true">
                <option value="" selected="true" disabled="true">请选择账号</option>
                {% for account in account_list %}
                <option value="{{ account.username }}">{{ account.username }}</option>
                {% endfor %}
            </select>
           <span id="search" onclick="get_cdnlist(1)" class="input-group-addon btn btn-primary">搜索</span>
        </div>
        <div class="panel" >
            <div class="pannel-heading">
                <h3 class="panel-title">CDN信息列表</h3>
            </div>
            <div class="pannel-body">
                <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>日期</th>
                                <th>阿里云账号</th>
                                <th>带宽峰值</th>
                                <th>总流量</th>
                            </tr>
                        </thead>

                </table>
                <div class="pagination pull-left">

                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block bottom-js %}
<script type="text/javascript" >

function get_cdnlist(page) {
    var key=$('#search').prev().val();
    var account=$('#account option:selected').val();
    $.ajax({
        url: "/cdndata/info/",
        type: "POST",
        data: {key:account,page:page},
        success: function (callback) {
            $('.cdn').remove();
            var result=JSON.parse(callback);
            var cdndata_list=result['cdndata_list'];
            var page_num=result['page_num'];
            $.each(cdndata_list,function (index,cdndata) {
                var html="<tr class='cdn'><td>"+cdndata[0]+"</td><td>"+cdndata[1]+"</td><td>"+readablizeBps(cdndata[2])+"</td><td>"+readablizeBytes(cdndata[3])+"</td></tr>";
                $('table').append(html);
            });
            $('.pagination').empty();
            for(var i=1;i<=parseInt(page_num);i++){
                if(i==parseInt(page)){
                    var html_page="<li  class='active'><a href='#' onclick='get_cdnlist("+i+")'>"+i+"</a></li>";
                }else{
                    var html_page="<li><a href='#' onclick='get_cdnlist("+i+")'>"+i+"</a></li>";
                }

                $('.pagination').append(html_page);
            }
        }

    })
}
function readablizeBytes(bytes) {
    var bytes=parseInt(bytes);
    var s = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
    var e = Math.floor(Math.log(bytes)/Math.log(1024));
    return (bytes/Math.pow(1024, Math.floor(e))).toFixed(2)+" "+s[e];
}

function readablizeBps(bps) {
    var bps=parseInt(bps);
    var s = ['bps', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb'];
    var e = Math.floor(Math.log(bps)/Math.log(1024));
    return (bps/Math.pow(1000, Math.floor(e))).toFixed(2)+" "+s[e];
}


</script>
{% endblock %}